縦書き表示用のTABLEにスタイルシートを追加すると、縦書き表示をより効果的に演出できるようになります。
フォントファミリーを「草書体」に指定するなど、いろいろ工夫してみてください。また、width属性を使ってTABLEの横幅を指定すると、縦書き文字の行間を調整することも可能です。
縦書き表示に半角文字を使用するときに文字が左にズレてしまわないよう、文字の配置をセンタリングにしておくのも忘れないでください。 |
<HEAD>
<STYLE type="text/css">
<!--
.tate{
font-size:20pt;
font-family:cursive;
text-align:center;
width:250
}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE border="0" align="center" class="tate">
<TR><TD> </TD><TD>聲</TD><TD> </TD><TD> </TD><TD>奥</TD></TR>
<TR><TD>秋</TD><TD>き</TD><TD> </TD><TD>紅</TD><TD>山</TD></TR>
<TR><TD>は</TD><TD>く</TD><TD>鳴</TD><TD>葉</TD><TD>に</TD></TR>
<TR><TD>か</TD><TD>と</TD><TD>く</TD><TD>踏</TD><TD> </TD></TR>
<TR><TD>な</TD><TD>き</TD><TD>鹿</TD><TD>み</TD><TD> </TD></TR>
<TR><TD>し</TD><TD>ぞ</TD><TD>の</TD><TD>分</TD><TD> </TD></TR>
<TR><TD>き</TD><TD> </TD><TD> </TD><TD>け</TD><TD> </TD></TR>
</TABLE>
</BODY>
|
 |
この例では、「tate」というクラス名をつけたスタイルシートを縦書き表示用のTBALEタグに適用しています（class="tate"の部分）。
クラス名「tate」のスタイルシートでは、文字サイズを20pt（font-size:20pt）、フォントファミリーを草書体・筆記体系（font-family:cursive）、文字配置をセンタリング（text-align:center）、表組みの幅を250ピクセル（width:250）に指定しています。
なお、フォントファミリーは、パソコンにインストールされているフォントやブラウザの設定に左右されるため、必ずしも草書体・筆記体系になるとは限りません。 |
